<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<script src="js/echarts.min.js"></script>
		<script src="js/data.js"></script>
	</head>
	<style>
		* {
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}

		body {
			background-color: #06164A;
		}

		.left {
			width: 40%;
		}

		.left>div {
			height: 400px;
			/* border: 1px solid #fff; */
		}
		
	</style>
	<body>
		<div id='app'>
			<section class="left">
				<div id='chart1'></div>
				<div id='chart2'></div>
				<div id='chart3'></div>
				<div id='chart4'></div>
			</section>
		</div>
		<script>
			Vue.createApp({
				data() {
					return {

					}
				},
				mounted() {
					this.chart1()
					this.chart2()
					this.chart3()
					this.chart4()
				},
				methods: {
					chart1() {
						var xdata = [],
							ydata = []
						data.chart1.forEach(item => {
							xdata.push(item.industry)
							ydata.push(item.value)
						})
						var chartDom = document.getElementById('chart1');
						var myChart = echarts.init(chartDom, 'dark');
						var option;
						option = {
							backgroundColor: '#06164A',
							title: { //标题
								text: '各行业程序员数量',
								left: 'center',
								top: '10px'
							},
							tooltip: { //提示框
								show: true,
								trigger: 'axis'
							},
							xAxis: {
								type: 'category',
								data: xdata
							},
							yAxis: {
								type: 'value',
								axisLine: {
									show: true
								}
							},
							series: [{
								data: ydata,
								type: 'bar',
								barWidth: '40%',
								itemStyle: {
									borderRadius: 6
								}
							}]
						};
						option && myChart.setOption(option);
						window.addEventListener('resize', () => {
							myChart.resize()
						})
					},
					chart2() {
						var xdata = [],
							ydata1 = [],
							ydata2 = []
						data.chart2.forEach(item => {
							xdata.push(item.month)
							ydata1.push(item.value1)
							ydata2.push(item.value2)
						})
						var chartDom = document.getElementById('chart2');
						var myChart = echarts.init(chartDom, 'dark');
						var option;
						option = {
							backgroundColor: '#06164A',
							title: { //标题
								text: '学习变化',
								left: 'center',
								top: '10px'
							},
							legend: {
								show: true,
								right: "10%",
								top: 10
							},
							tooltip: { //提示框
								show: true,
								trigger: 'axis'
							},
							xAxis: {
								type: 'category',
								data: xdata
							},
							yAxis: {
								type: 'value',
								axisLine: {
									show: true
								}
							},
							series: [{
									name: '新增项目',
									data: ydata1,
									type: 'line',
									smooth: true,
									lineStyle: {
										color: '#ED3F35',
										width: 3,
									},
									itemStyle: {
										color: '#ED3F35',
									},
									symbol: 'emptyCircle',
									symbolSize: 8
								},
								{
									name: '新增技能',
									data: ydata2,
									type: 'line',
									smooth: true,
									lineStyle: {
										color: '#00F0F0',
										width: 3,
									},
									itemStyle: {
										color: '#00F0F0',
									},
									symbol: 'emptyCircle',
									symbolSize: 8
								}
							]
						};
						option && myChart.setOption(option);
						window.addEventListener('resize', () => {
							myChart.resize()
						})
					},
					chart3() {
						data.chart3.forEach(item => {
							item.name = item.ageGroup
						})
						var chartDom = document.getElementById('chart3');
						var myChart = echarts.init(chartDom, 'dark');
						var option;
						option = {
							backgroundColor: '#06164A',
							title: { //标题
								text: '学习变化',
								left: 'center',
								top: '10px'
							},
							legend: {
								show: true,
								right: 'center',
								bottom: '10px',
								width: '100%'
							},
							tooltip: { //提示框
								show: true,
								trigger: 'item',
								formatter: '{b}:{c} {d}%'
							},
							series: [{
								name: '年龄分布',
								data: data.chart3,
								type: 'pie',
								radius: ['40%', '60%'],
								label: {
									show: false
								}
							}]
						};
						option && myChart.setOption(option);
						window.addEventListener('resize', () => {
							myChart.resize()
						})
					},
					chart4() {
						var xdata = [],
							ydata1 = [],
							ydata2 = []
						data.chart4.forEach(item => {
							xdata.push(item.date)
							ydata1.push(item.inflow)
							ydata2.push(item.outflow)
						})
						var chartDom = document.getElementById('chart4');
						var myChart = echarts.init(chartDom, 'dark');
						var option;
						option = {
							backgroundColor: '#06164A',
							title: { //标题
								text: '折线图-公司人员流动',
								left: 'center',
								top: '10px'
							},
							legend: {
								show: true,
								right: "10%",
								top: 10
							},
							tooltip: { //提示框
								show: true,
								trigger: 'axis'
							},
							xAxis: {
								type: 'category',
								data: xdata
							},
							yAxis: {
								type: 'value',
								axisLine: {
									show: true
								}
							},
							series: [{
									name: '流入',
									data: ydata1,
									type: 'line',
									smooth: true,
									lineStyle: {
										color: '#00FF00',
										width: 3,
									},
									itemStyle: {
										color: '#00FF00',
									},
									// symbol: 'emptyCircle',
									// symbolSize: 8
								},
								
								{
									name: '流出',
									data: ydata2,
									type: 'line',
									smooth: true,
									lineStyle: {
										color: '#00F0F0',
										width: 3,
									},
									itemStyle: {
										color: '#00F0F0',
									},
									// symbol: 'emptyCircle',
									// symbolSize: 8
								}
							]
						};
						option && myChart.setOption(option);
						window.addEventListener('resize', () => {
							myChart.resize()
						})
					}
				}
			}).mount('#app')
		</script>
	</body>
</html>
